/* hook组件 useCallback */
import React, {useCallback, useState} from 'react'
import {Button} from 'antd'


/*
*  诉求：当父组件更新时，因为传递给子组件的属性仅仅是一个函数(特点：基本应该是不变的)，所以不想让子组件跟着更新
*   + 第一条：基于useCallback，传递给子组件的属性(函数)，每一次需要的是相同的堆内存地址
*   + 第二条：类组件 -- 基于PureComponent，在子组件内部做处理，验证父组件传递的属性是否发生变化，如没变化，则子组件不更新
*   +        函数组件：基于  React.memo 函数，对新老传递的属性作比较
* */

// 子组件
// 类组件
// class Child extends React.PureComponent {
//     render() {
//         console.log('child render', this.props)
//         return <div>我是子组件</div>
//     }
// }
// 函数组件
const Child = React.memo(function (props) {
    console.log('child render', props)
    return <div>我是子组件</div>
})

// 父组件
const Demo = function () {
    let [x, setX] = useState(0)

    const handle = useCallback(() => {

    }, []) // 第一次 0x001 第二次 0x101

    return <div className="vote-box">
        <Child handle={handle}/>
        <div className="main">
            <p>{x}</p>
        </div>
        <div className="footer">
            <Button onClick={() => setX(x + 1)}>累加</Button>
        </div>
    </div>
}


export default Demo